<template>
	<view class="cu-form-group item">
		<view class="title">{{ title }}</view>
		<view class="box">
			<input class="inp" :disabled="disabled" :placeholder="'请输入' + title" :name="name" :value="value" @input="input"/>
			<image  class="cuIcon-right" src="/static/images/go.png" mode=""></image>
		</view>
	</view>
</template>

<script>
export default {
	name: 'formItem',
	model: {
		prop: 'value',
		event: 'updateValue'
	},
	props: {
		title: '',
		name:"",
		disabled:false,
		value: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {};
	},
	methods:{
		input(e){
			console.log(e)
			this.$emit('updateValue',e.detail.value)
		}
	}
};
</script>

<style lang="scss" scoped>
.cu-form-group {
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 90rpx;
	border-bottom: 1rpx solid #dddddd;
	.box {
		display: flex;
		align-items: center;
		.inp {
			height: 90rpx;
			margin: 0;
			padding: 0;
			width: 500rpx;
		}
		.cuIcon-right {
			width: 11.18rpx;
			height: 20rpx;
			margin-left: $margin-width;
			background: url('/static/images/go.png') no-repeat center/100% 100%;
		}
	}
}
.item {
	width: $connet-width;
	margin: 0 auto;
	line-height: 90rpx;

	.inp {
		text-align: right;
	}

	.cuIcon-right {
		color: $unselected;
	}

	.cu-avatar {
		width: 90rpx;
		height: 90rpx;
		margin-bottom: $submargin-width;
	}
}
</style>
